﻿@(Html.DevExtreme().DataGrid<DevExtreme.NETCore.Demos.Models.CustomEditorsTask>()
    .DataSource(d => d.Mvc()
        .Controller("DataGridCustomEditors")
        .LoadAction("Tasks")
        .InsertAction("InsertTask")
        .UpdateAction("UpdateTask")
        .Key("ID")
    )
    .ShowBorders(true)
    .Editing(editing => {
        editing.Mode(GridEditMode.Cell);
        editing.AllowUpdating(true);
        editing.AllowAdding(true);
    })
    .SearchPanel(sp => sp.Visible(true))
    .HeaderFilter(hf => hf.Visible(true))
    .Paging(p => p.PageSize(15))
    .OnRowInserted("function(e) { e.component.navigateToRow(e.key); }")
    .Columns(columns => {
        columns.AddFor(m => m.Owner)
            .AllowSorting(false)
            .Lookup(lookup => lookup
                .DataSource(d => d.Mvc().Controller("DataGridCustomEditors").LoadAction("Employees").Key("ID"))
                .ValueExpr("ID")
                .DisplayExpr("FullName")
            )
            .EditCellTemplate(new TemplateName("DropDownBoxTemplate"))
            .Width(150);
        columns.AddFor(m => m.AssignedEmployee)
            .AllowSorting(false)
            .Caption("Assignees")
            .Lookup(lookup => lookup
                .DataSource(d => d.Mvc().Controller("DataGridCustomEditors").LoadAction("Employees").Key("ID"))
                .ValueExpr("ID")
                .DisplayExpr("FullName")
            )
            .CellTemplate(new JS("cellTemplate"))
            .CalculateFilterExpression(@<text>
                function(filterValue, selectedFilterOperation, target) {
                    if(target === "search" && typeof(filterValue) === "string") {
                        return [this.dataField, "contains", filterValue]
                    }
                    return function(data) {
                        return (data.AssignedEmployee || []).indexOf(filterValue) !== -1
                    }
                }</text>)
            .EditCellTemplate(new TemplateName("TagBoxTemplate"))
            .Width(200);
        columns.AddFor(m => m.Subject);
        columns.AddFor(m => m.Status)
            .Width(200)
            .EditorOptions(new {
                itemTemplate = new JS("itemTemplate")
            })
            .Lookup(lookup => lookup
                .DataSource(new JS("statuses"))
                .ValueExpr("id")
                .DisplayExpr("name")
            );
    })
)

@using(Html.DevExtreme().NamedTemplate("TagBoxTemplate")) {
    @(Html.DevExtreme().TagBox()
        .DataSource(d => d.Mvc().Controller("DataGridCustomEditors").LoadAction("Employees").Key("ID"))
        .Value(new JS("value"))
        .ValueExpr("ID")
        .DisplayExpr("FullName")
        .ShowSelectionControls(true)
        .MaxDisplayedTags(3)
        .ShowMultiTagOnly(false)
        .ApplyValueMode(EditorApplyValueMode.UseButtons)
        .SearchEnabled(true)
        .OnValueChanged("function(e) { setValue(e.value); }")
        .OnSelectionChanged("function(e) { component.updateDimensions(); }")
    )
}

@using(Html.DevExtreme().NamedTemplate("DropDownBoxTemplate")) {
    @(Html.DevExtreme().DropDownBox()
        .DataSource(d => d.Mvc().Controller("DataGridCustomEditors").LoadAction("Employees").Key("ID"))
        .Value(new JS("value"))
        .ValueExpr("ID")
        .DisplayExpr("FullName")
        .DropDownOptions(options => options.Width(500))
        .Option("setValue", new JS("setValue"))
        .ContentTemplate(new TemplateName("ContentTemplate"))
    )
}

@using(Html.DevExtreme().NamedTemplate("ContentTemplate")) {
    @(Html.DevExtreme().DataGrid()
        .DataSource(d => d.Mvc().Controller("DataGridCustomEditors").LoadAction("Employees").Key("ID"))
        .RemoteOperations(true)
        .Height(250)
        .Columns(c => {
            c.Add().DataField("FullName");
            c.Add().DataField("Title");
            c.Add().DataField("Department");
        })
        .Scrolling(s => s.Mode(GridScrollingMode.Virtual))
        .HoverStateEnabled(true)
        .RemoteOperations(true)
        .Selection(s => s.Mode(SelectionMode.Single))
        .SelectedRowKeys(new JS("[component.option('value')]"))
        .FocusedRowEnabled(true)
        .FocusedRowKey(new JS("component.option('value')"))
        .OnSelectionChanged("function(selectionChangedArgs) { onSelectionChanged(selectionChangedArgs, component) }")
    )
}

<script>
    function cellTemplate(container, options) {
        var noBreakSpace = "\u00A0",
            text = (options.value || []).map(element => {
                return options.column.lookup.calculateCellValue(element);
            }).join(", ");
        container.text(text || noBreakSpace).attr("title", text);
    }

    function onSelectionChanged(selectionChangedArgs, component) {
        var setValue = component.option('setValue');
        var selectedRowKey = selectionChangedArgs.selectedRowKeys[0];

        component.option('value', selectedRowKey);
        setValue(selectedRowKey);
        if(selectionChangedArgs.selectedRowKeys.length > 0) {
            component.close();
        }
    }

    function itemTemplate(itemData, itemIndex, itemElement) {
        if(itemData != null) {
            var imageContainer = $("<span>").addClass("status-icon middle").appendTo(itemElement);
            $("<img>").attr("src", "../../images/icons/status-" + itemData.id + ".png").appendTo(imageContainer);
            $("<span>").addClass("middle").text(itemData.name).appendTo(itemElement);
        } else {
            $("<span>").text("(All)").appendTo(itemElement);
        }
    }
</script>
<script src="~/data/statuses.js"></script>
